<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>永辉外卖</title>
<script src="js/jquery.js"></script>
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet">
<link href="css/default-theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
  <style>
    .dashboard {
      padding: 20px;
      background: #f5f7fa;
      min-height: calc(100vh - 150px);
    }
    .stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }
    .stat-card {
      flex: 1;
      min-width: 250px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 20px;
      transition: all 0.3s ease;
    }
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
    .stat-card.green {
      border-left: 4px solid #28a745;
    }
    .stat-card.blue {
      border-left: 4px solid #17a2b8;
    }
    .stat-card.orange {
      border-left: 4px solid #fd7e14;
    }
    .stat-card.purple {
      border-left: 4px solid #6f42c1;
    }
    .stat-card .icon {
      font-size: 2.5rem;
      float: left;
      margin-right: 15px;
      opacity: 0.8;
    }
    .stat-card.green .icon {
      color: #28a745;
    }
    .stat-card.blue .icon {
      color: #17a2b8;
    }
    .stat-card.orange .icon {
      color: #fd7e14;
    }
    .stat-card.purple .icon {
      color: #6f42c1;
    }
    .stat-card .value {
      font-size: 1.8rem;
      font-weight: 600;
      margin: 5px 0;
    }
    .stat-card .label {
      font-size: 0.9rem;
      color: #6c757d;
      text-transform: uppercase;
    }
    .stat-card .trend {
      font-size: 0.85rem;
      margin-top: 5px;
    }
    .trend.positive {
      color: #28a745;
    }
    .trend.negative {
      color: #dc3545;
    }

    .chart-container {
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-bottom: 30px;
    }
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .chart-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: #343a40;
    }
    .chart-controls {
      display: flex;
      gap: 10px;
    }
    .time-filter {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      padding: 5px 10px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .time-filter.active {
      background: #e9f7fe;
      border-color: #17a2b8;
      color: #17a2b8;
    }
    #salesChart {
      height: 350px;
      width: 100%;
    }

    .data-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .data-section {
      flex: 1;
      min-width: 300px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 20px;
    }
    .section-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e9ecef;
      color: #343a40;
    }
    .product-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .product-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f8f9fa;
    }
    .product-item:last-child {
      border-bottom: none;
    }
    .product-rank {
      width: 24px;
      height: 24px;
      background: #f8f9fa;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 0.8rem;
      font-weight: 600;
    }
    .product-rank.top3 {
      background: #e9f7fe;
      color: #17a2b8;
    }
    .product-info {
      flex: 1;
    }
    .product-name {
      font-weight: 500;
      margin-bottom: 3px;
    }
    .product-category {
      font-size: 0.8rem;
      color: #6c757d;
    }
    .product-sales {
      font-weight: 600;
      color: #28a745;
    }

    .machine-status {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .status-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
    }
    .status-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .status-indicator.normal {
      background: #28a745;
    }
    .status-indicator.warning {
      background: #ffc107;
    }
    .status-indicator.error {
      background: #dc3545;
    }
    .machine-info {
      flex: 1;
    }
    .machine-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    .machine-location {
      font-size: 0.85rem;
      color: #6c757d;
    }
    .machine-stock {
      font-weight: 600;
      font-size: 0.9rem;
    }
    .machine-stock.low {
      color: #dc3545;
    }

    .quick-actions {
      display: flex;
      gap: 15px;
      margin-top: 25px;
      flex-wrap: wrap;
    }
    .action-btn {
      flex: 1;
      min-width: 150px;
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .action-btn:hover {
      border-color: #17a2b8;
      background: #f1f9ff;
      transform: translateY(-3px);
    }
    .action-btn i {
      font-size: 1.8rem;
      color: #17a2b8;
      margin-bottom: 10px;
    }
    .action-btn .action-label {
      font-weight: 500;
      color: #495057;
    }
  </style>
</head>
<body class="sticky-header">
<section>
  <div class="sidebar-left">
    <div class="sidebar-left-info">
      <div class=" search-field"> </div>
      <ul class="nav nav-pills nav-stacked side-navigation">
        <li class="menu-list nav-active"> <a href=""><i class="fa fa-drivers-license"></i> <span>主页</span></a>
          <ul class="child-list">
            <li class="active"><a href="index.html">主页</a></li>
          </ul>
        </li>
        <li class="menu-list "> <a href=""><i class="fa fa-file-text"></i> <span>订单管理</span></a>
          <ul class="child-list">
            <li><a href="销售订单列表.html">销售订单列表</a></li>
            <li><a href="充值订单列表.html">充值订单列表</a></li>
            <li><a href="补货订单列表.html">补货订单列表</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href=""><i class="fa fa-shopping-cart"></i> <span>商品管理</span></a>
          <ul class="child-list">
            <li><a href="商品列表.html">商品列表</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href=""><i class="fa fa-desktop"></i> <span>机器管理</span></a>
          <ul class="child-list">
            <li><a href="机器列表.html"> 机器列表</a></li>
            <li><a href="货道列表.html">货道列表</a></li>
            <li><a href="补货预警设置.html">补货预警设置</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href="javascript:;"><i class="fa fa-pie-chart"></i> <span>数据管理</span></a>
          <ul class="child-list">
            <li><a href="数据统计.html">数据统计</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href=""><i class="fa fa-users"></i> <span>用户管理</span></a>
          <ul class="child-list">
            <li ><a href="管理员列表.html">管理员列表</a></li>
            <li><a href="员工列表.html">员工列表</a></li>
            <!--<li><a href="微信接入.html">微信接入</a></li>
            <li><a href="微信菜单.html">微信菜单</a></li>
            <li><a href="微信支付.html">微信支付</a></li>-->
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="body-content" >
    <div class="header-section">
      <div class="logo dark-logo-bg"> <a href="index.html"> <img src="img/logo-icon.png" alt="">
        <!--<i class="fa fa-maxcdn"></i>-->
        <span class="brand-name" style="font-size: 15px; font-weight: bold;">永辉外卖</span> </a> </div>
      <div class="icon-logo dark-logo-bg hidden-xs hidden-sm"> <a href="index.html"><img src="img/logo-icon.png" alt=""> </a> </div>
      <a class="toggle-btn"><i class="fa fa-outdent"></i></a>
      <div class="kouhao">专注健康.营养</div>
      <div class="notification-wrap">
        <div class="right-notification">
          <ul class="notification-menu">
            <li  class="dropdown">
				<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false"> <i class="fa  fa-cogs"></i> 账号设置  <b class=" fa fa-angle-down"></b></a>

			  <ul role="menu" class="dropdown-menu language-switch">
                                <li>
                                    <a  href="充值活动.html">充值活动</a>
                                    <a  href="修改密码.html">修改密码</a>
                                </li>

                            </ul>

			  </li>



            <li> <a href="http://localhost:8888/登录.html" class="btn btn-default  dropdown-toggle"> <i class="fa fa-sign-out"></i>退出登录 </a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="page-head">
      <ol class="breadcrumb">
        <li><a href="index.html">主页</a></li>

      </ol>
      <h3>系统概况</h3>
    </div>
    <div class="wrapper">
      <div class="panel">
        <div class="panel-body">

          <div class="dashboard">
            <div class="stats-row">
              <div class="stat-card green">
                <div class="icon"><i class="fa fa-shopping-cart"></i></div>
                <div class="value">1,254</div>
                <div class="label">今日订单</div>
                <div class="trend positive">↑ 12.5% 较昨日</div>
              </div>

              <div class="stat-card blue">
                <div class="icon"><i class="fa fa-yen"></i></div>
                <div class="value">¥24,680</div>
                <div class="label">今日销售额</div>
                <div class="trend positive">↑ 8.3% 较昨日</div>
              </div>

              <div class="stat-card orange">
                <div class="icon"><i class="fa fa-cube"></i></div>
                <div class="value">328</div>
                <div class="label">商品总数</div>
                <div class="trend positive">↑ 5.2% 较上周</div>
              </div>

              <div class="stat-card purple">
                <div class="icon"><i class="fa fa-cogs"></i></div>
                <div class="value">78</div>
                <div class="label">运营机器</div>
                <div class="trend">3台需要补货</div>
              </div>
            </div>

            <div class="chart-container">
              <div class="chart-header">
                <div class="chart-title">销售趋势分析</div>
                <div class="chart-controls">
                  <div class="time-filter active">今日</div>
                  <div class="time-filter">本周</div>
                  <div class="time-filter">本月</div>
                  <div class="time-filter">全年</div>
                </div>
              </div>
              <div id="salesChart"></div>
            </div>

            <div class="data-row">
              <div class="data-section">
                <div class="section-title">热销商品排行</div>
                <ul class="product-list">
                  <li class="product-item">
                    <div class="product-rank top3">1</div>
                    <div class="product-info">
                      <div class="product-name">鲜榨橙汁</div>
                      <div class="product-category">饮品</div>
                    </div>
                    <div class="product-sales">248份</div>
                  </li>
                  <li class="product-item">
                    <div class="product-rank top3">2</div>
                    <div class="product-info">
                      <div class="product-name">三明治套餐</div>
                      <div class="product-category">快餐</div>
                    </div>
                    <div class="product-sales">196份</div>
                  </li>
                  <li class="product-item">
                    <div class="product-rank top3">3</div>
                    <div class="product-info">
                      <div class="product-name">蔬菜沙拉</div>
                      <div class="product-category">轻食</div>
                    </div>
                    <div class="product-sales">182份</div>
                  </li>
                  <li class="product-item">
                    <div class="product-rank">4</div>
                    <div class="product-info">
                      <div class="product-name">鲜奶面包</div>
                      <div class="product-category">烘焙</div>
                    </div>
                    <div class="product-sales">165份</div>
                  </li>
                  <li class="product-item">
                    <div class="product-rank">5</div>
                    <div class="product-info">
                      <div class="product-name">即食鸡胸肉</div>
                      <div class="product-category">蛋白质</div>
                    </div>
                    <div class="product-sales">142份</div>
                  </li>
                </ul>
              </div>

              <div class="data-section">
                <div class="section-title">机器状态监控</div>
                <div class="machine-status">
                  <div class="status-item">
                    <div class="status-indicator normal"></div>
                    <div class="machine-info">
                      <div class="machine-name">创业大厦A座</div>
                      <div class="machine-location">1楼大厅</div>
                    </div>
                    <div class="machine-stock">库存充足</div>
                  </div>
                  <div class="status-item">
                    <div class="status-indicator warning"></div>
                    <div class="machine-info">
                      <div class="machine-name">金融中心B区</div>
                      <div class="machine-location">负1层餐厅</div>
                    </div>
                    <div class="machine-stock low">需补货</div>
                  </div>
                  <div class="status-item">
                    <div class="status-indicator normal"></div>
                    <div class="machine-info">
                      <div class="machine-name">科技园3号楼</div>
                      <div class="machine-location">3层休息区</div>
                    </div>
                    <div class="machine-stock">库存充足</div>
                  </div>
                  <div class="status-item">
                    <div class="status-indicator normal"></div>
                    <div class="machine-info">
                      <div class="machine-name">购物中心东门</div>
                      <div class="machine-location">入口处</div>
                    </div>
                    <div class="machine-stock">库存充足</div>
                  </div>
                  <div class="status-item">
                    <div class="status-indicator error"></div>
                    <div class="machine-info">
                      <div class="machine-name">大学城图书馆</div>
                      <div class="machine-location">1楼自习区</div>
                    </div>
                    <div class="machine-stock low">急需补货</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="quick-actions">
              <div class="action-btn">
                <i class="fa fa-plus-circle"></i>
                <div class="action-label">添加新商品</div>
              </div>
              <div class="action-btn">
                <i class="fa fa-truck"></i>
                <div class="action-label">创建补货单</div>
              </div>
              <div class="action-btn">
                <i class="fa fa-bar-chart"></i>
                <div class="action-label">查看报表</div>
              </div>
              <div class="action-btn">
                <i class="fa fa-cog"></i>
                <div class="action-label">系统设置</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>




<script src="js/bootstrap.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/scripts.js"></script>
<script src="laydate/laydate.js"></script>
<script>
lay('#version').html('-v'+ laydate.v);
laydate.render({
    elem: '#test1'
  ,range: true
  ,theme: '#1890ff'
});

// 使用ECharts绘制销售趋势图表
document.addEventListener('DOMContentLoaded', function() {
  // 初始化图表
  const chartDom = document.getElementById('salesChart');
  const myChart = echarts.init(chartDom);

  // 模拟数据
  const hours = ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'];
  const orders = [45, 78, 125, 210, 185, 150, 120, 95, 130, 195];
  const revenue = [820, 1450, 2350, 3980, 3520, 2850, 2300, 1800, 2450, 3700];

  // 配置项
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#17a2b8'
        }
      }
    },
    legend: {
      data: ['订单数量', '销售额'],
      textStyle: {
        color: '#6c757d'
      },
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: hours,
      axisLine: {
        lineStyle: {
          color: '#e9ecef'
        }
      },
      axisLabel: {
        color: '#6c757d'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '订单数量',
        position: 'left',
        axisLine: {
          lineStyle: {
            color: '#e9ecef'
          }
        },
        axisLabel: {
          formatter: '{value}',
          color: '#6c757d'
        },
        splitLine: {
          lineStyle: {
            color: '#f8f9fa'
          }
        }
      },
      {
        type: 'value',
        name: '销售额',
        position: 'right',
        axisLine: {
          lineStyle: {
            color: '#e9ecef'
          }
        },
        axisLabel: {
          formatter: '¥{value}',
          color: '#6c757d'
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '订单数量',
        type: 'line',
        smooth: true,
        data: orders,
        lineStyle: {
          width: 3,
          color: '#17a2b8'
        },
        itemStyle: {
          color: '#17a2b8'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(23, 162, 184, 0.2)' },
            { offset: 1, color: 'rgba(23, 162, 184, 0.05)' }
          ])
        }
      },
      {
        name: '销售额',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        data: revenue,
        lineStyle: {
          width: 3,
          color: '#28a745'
        },
        itemStyle: {
          color: '#28a745'
        }
      }
    ]
  };

  // 应用配置
  myChart.setOption(option);

  // 响应窗口大小变化
  window.addEventListener('resize', function() {
    myChart.resize();
  });

  // 时间筛选切换
  const timeFilters = document.querySelectorAll('.time-filter');
  timeFilters.forEach(filter => {
    filter.addEventListener('click', function() {
      timeFilters.forEach(f => f.classList.remove('active'));
      this.classList.add('active');

      // 在实际应用中，这里会重新加载对应时间范围的数据
    });
  });
});
</script>

</body>
</html>
